<template>
  <view class="flex-col page">
    <view class="flex-col flex-auto group_3">
      <view class="flex-col">
        <view class="grid">
          <view class="flex-row justify-between items-center relative grid-item">
            <image class="image_6" src="../../static/images/fc266039e4caf7c29da24e91aa036bf4.png" />
            <view class="flex-col items-center space-y-4">
              <text class="font_3">箱式</text>
              <text class="font_3">电阻炉</text>
            </view>
          </view>
          <view class="flex-row justify-between items-center relative grid-item">
            <image class="image_6" src="../../static/images/b993eb8c741c33c7e097d95c5c4ccdd7.png" />
            <view class="flex-col items-center space-y-4">
              <text class="font_2">管式</text>
              <text class="font_2">电阻炉</text>
            </view>
          </view>
          <view class="flex-row justify-between items-center relative grid-item">
            <image class="image_6" src="../../static/images/8fa041450c63a4a7b0c1cc98e4a8afac.png" />
            <view class="flex-col items-center space-y-4">
              <text class="font_2">坩埚</text>
              <text class="font_2">电阻炉</text>
            </view>
          </view>
          <view class="flex-row justify-between items-center relative grid-item">
            <image class="image_6" src="../../static/images/133da191968564a5c073fa2b51450f3a.png" />
            <view class="flex-col items-center space-y-4">
              <text class="font_2">电阻丝</text>
              <text class="font_2">马弗炉</text>
            </view>
          </view>
        </view>
        <view class="flex-row equal-division space-x-30">
          <view class="flex-row justify-between items-center relative equal-division-item">
            <image class="image_8" src="../../static/images/791550a7f51c739dfa99fb583a62b3eb.png" />
            <view class="flex-col items-center space-y-4">
              <text class="font_2">硅碳棒</text>
              <text class="font_2">马弗炉</text>
            </view>
          </view>
          <view class="flex-row justify-between items-center relative equal-division-item">
            <image class="self-start image_7" src="../../static/images/8f61747502d7ff338143ef4c67bb8781.png" />
            <view class="flex-col items-center self-start group_4 space-y-2">
              <text class="font_2">1000℃</text>
              <text class="font_2">电炉</text>
            </view>
          </view>
        </view>
      </view>
      <view class="flex-row group_5 space-x-22">
        <view class="flex-row justify-between items-center section">
          <image class="image_9" src="../../static/images/4841605027d8512b723d58073a51d94e.png" />
          <view class="flex-col items-center space-y-2">
            <text class="font_2">1200℃</text>
            <text class="font_2">电炉</text>
          </view>
        </view>
        <view class="flex-row justify-between items-center section_2">
          <image class="image_10" src="../../static/images/0362bc094fc094f3a0c1201d48fc9a22.png" />
          <view class="flex-col items-center space-y-2">
            <text class="font_2">1400℃</text>
            <text class="font_2">电炉</text>
          </view>
        </view>
      </view>
      <view class="flex-row group_6 space-x-29">
        <view class="flex-row justify-between relative section_3">
          <image class="self-start image_12" src="../../static/images/b7baba19f972c4dc054eca2a3bc48159.png" />
          <view class="flex-col items-center self-center space-y-2">
            <text class="font_2">1600℃</text>
            <text class="font_2">电炉</text>
          </view>
        </view>
        <view class="flex-row justify-between items-end section_4">
          <image class="image_11" src="../../static/images/9ba7cd7e9730103942d2baff1664e980.png" />
          <view class="flex-col items-center space-y-2">
            <text class="font_2">1800℃</text>
            <text class="font_2">电炉</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    components: {},
    data() {
      return {};
    },

    methods: {},
  };
</script>

<style scoped lang="scss">
  .page {
    background-color: #ffffff;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    .group_3 {
      padding: 33.33rpx 12.5rpx 181.25rpx 16.67rpx;
      overflow-y: auto;
      .grid {
        margin-right: 4.17rpx;
        height: 331.25rpx;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        row-gap: 68.75rpx;
        column-gap: 64.58rpx;
        .grid-item {
          padding: 12.5rpx 16.67rpx 12.5rpx 41.67rpx;
          background-color: #ffffff;
          border-radius: 20.83rpx;
          box-shadow: 0px 4.17rpx 8.33rpx #00000040;
          border: solid 2.08rpx #00baad80;
          .image_6 {
            width: 88.54rpx;
            height: 88.54rpx;
          }
        }
      }
      .equal-division {
        margin-right: 4.17rpx;
        padding-top: 60.42rpx;
        .equal-division-item {
          flex: 1 1 327.08rpx;
          padding: 8.33rpx 8.33rpx 8.33rpx 33.33rpx;
          background-color: #ffffff;
          border-radius: 20.83rpx;
          box-shadow: 0px 4.17rpx 8.33rpx #00000040;
          height: 129.17rpx;
          border: solid 2.08rpx #00baad80;
          .image_8 {
            width: 83.33rpx;
            height: 102.08rpx;
          }
          .image_7 {
            width: 93.75rpx;
            height: 100rpx;
          }
          .group_4 {
            margin-top: 12.5rpx;
          }
        }
      }
      .space-x-30 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-left: 62.5rpx;
        }
      }
      .space-y-4 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-top: 8.33rpx;
        }
        .font_3 {
          font-size: 37.5rpx;
          font-family: SourceHanSansCN;
          line-height: 45.83rpx;
          color: #383838;
        }
      }
      .font_2 {
        font-size: 37.5rpx;
        font-family: SourceHanSansCN;
        line-height: 45.83rpx;
        color: #000000;
      }
      .group_5 {
        margin-top: 70.83rpx;
        .section {
          padding: 8.33rpx 0 8.33rpx 41.67rpx;
          flex: 1 1 337.5rpx;
          background-color: #ffffff;
          border-radius: 20.83rpx;
          box-shadow: 0px 4.17rpx 8.33rpx #00000040;
          border: solid 2.08rpx #00baad80;
          .image_9 {
            width: 83.33rpx;
            height: 104.17rpx;
          }
        }
        .section_2 {
          padding-left: 41.67rpx;
          padding-top: 8.33rpx;
          flex: 1 1 337.5rpx;
          background-color: #ffffff;
          border-radius: 20.83rpx;
          box-shadow: 0px 4.17rpx 8.33rpx #00000040;
          border: solid 2.08rpx #00baad80;
          .image_10 {
            width: 93.75rpx;
            height: 114.58rpx;
          }
        }
      }
      .space-x-22 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-left: 45.83rpx;
        }
      }
      .space-y-2 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-top: 4.17rpx;
        }
      }
      .group_6 {
        margin-top: 85.42rpx;
        .section_3 {
          padding-left: 33.33rpx;
          padding-top: 16.67rpx;
          flex: 1 1 327.08rpx;
          background-color: #ffffff;
          border-radius: 20.83rpx;
          box-shadow: 0px 4.17rpx 8.33rpx #00000040;
          height: 129.17rpx;
          border: solid 2.08rpx #00baad80;
          .image_12 {
            width: 83.33rpx;
            height: 85.42rpx;
          }
        }
        .section_4 {
          margin-right: 4.17rpx;
          padding-left: 33.33rpx;
          padding-top: 4.17rpx;
          flex: 1 1 327.08rpx;
          background-color: #ffffff;
          border-radius: 20.83rpx;
          box-shadow: 0px 4.17rpx 8.33rpx #00000040;
          height: 129.17rpx;
          border: solid 2.08rpx #00baad80;
          .image_11 {
            margin-bottom: 4.17rpx;
            width: 93.75rpx;
            height: 112.5rpx;
          }
        }
      }
      .space-x-29 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-left: 60.42rpx;
        }
      }
    }
  }
</style>